<template>
  <div class="course_edit">
    <div class="flex mb10 flex_h_between">
      <div class="info_text cursor" @click="back"><a-icon type="left" />返回</div>
    </div>
    <a-form :form="form" layout="inline" class="form_wrap">
      <a-form-item label="名称" style="width: 100%;">
        <a-input v-decorator="['title',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}名称` }]}]" placeholder="名称" />
      </a-form-item>
      <a-form-item label="内容" class="form_detail_editor">
        <editor v-decorator="['content', { rules: [{ required: true, message: `请填写内容` }] }]" :content="detail.content || ''" @edit='activityEdit' height="200px"></editor>
      </a-form-item>
      <a-row class="mt20 text_center">
        <a-form-item class="mt20 text_center">
          <a-button type="primary" @click="submit" style="width: 150px;height:40px;">提交</a-button>
        </a-form-item>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'
import Editor from '@/components/Editor/Editor'
import { createInstitution, institutionDetail } from '@/api/config'
export default {
  name: 'institutionEdit',
  components: { Editor },
  data () {
    return {
      moment,
      form: this.$form.createForm(this),
      detail: {}
    }
  },
  computed: {
    ...mapState({
    })
  },
  async mounted () {
    if (this.$route.query.id) {
      await this.getDetail()
      let detail = JSON.parse(JSON.stringify(this.detail))
      this.form.setFieldsValue(detail)
      this.$forceUpdate()
    }
  },
  watch: {
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    async getDetail () {
      let res = await institutionDetail({ id: this.$route.query.id })
      if (res.code === 200) {
        this.detail = res.data
      }
    },
    activityEdit (val, text) {
      console.info(val, text)
      // this.$emit('changePositionEdit', val, text, this.keySign)
      // this.$emit('change', val, this.keySign)
    },
    async createData (params) {
      let res = await createInstitution(params)
      if (res.code === 200) {
        this.$message.success('提交成功')
      } else {
        this.$message.error(res.message)
      }
    },
    async submit () {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          console.info(values)
          let valuesCopy = JSON.parse(JSON.stringify(values))
          if (this.$route.query.id) {
            valuesCopy.id = this.$route.query.id
          }
          console.info(valuesCopy)
          await this.createData(valuesCopy)
          this.$router.push('/home/institutionManage')
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.course_edit
  padding 20px 30px
  background #fff
  min-height calc(100vh - 107px)
  .course_edit_title
    text-align center
    font-size 16px
    font-weight bold
  .form_wrap
    // width: 900px;
    // margin: 0 auto;
    ::v-deep .ant-form-item
      width 100%
      margin-right 0
      margin-bottom 10px
    :deep(.ant-form-item-label)
      width 120px
    .ant-form-item-control-wrapper
      width 180px
    .ant-row
      min-width 300px
    .subject_wrap
      display: flex;
      align-items: center;
    ::v-deep .ant-form-item-control-wrapper
      width: calc(100% - 120px);
</style>
